<template>
    <div class="body box-standard">
      <div class="container box-vertical box-border">
        <div class="bottom-line left-align" style="width: 300px;">
          <h3>
            <span style="color: #2980b9;">登陆</span>
            <span style="font-size: 16px;"><router-link to="../register">注册</router-link></span>
          </h3>
        </div>
        <div v-show="loginType==0" class="box-vertical" style="margin: 5px;">
          <form>
            <table>
              <tr>
                <td class="left-align">用户名:</td>
                <td>
                  <div class="table-interval">
                    <el-input v-model="userUsername" placeholder="请输入用户名" clearable></el-input>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="left-align">密码:</td>
                <td>
                  <div class="table-interval">
                    <el-input placeholder="请输入密码" v-model="userPassword" show-password clearable @keyup.enter.native="login"></el-input>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div style="display: flex;justify-content: space-evenly">
                    <el-radio-group v-model="userIsTeacher">
                      <el-radio label="0">学生</el-radio>
                      <el-radio label="1">老师</el-radio>
                    </el-radio-group>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div style="display: flex;justify-content: space-evenly">
                    <!--                  事件的绑定必须用v-on-->
                    <el-button :loading=isLoading @click="login" type="primary">登陆</el-button>
                    <el-button native-type="reset" type="primary" @click="reset">重置</el-button>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2"></td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="changeLoginType" @click="changeLoginType">
                    使用手机号验证登陆
                  </div>
                </td>
              </tr>
            </table>
          </form>
        </div>
        <div v-show="loginType==1" class="box-vertical" style="margin: 5px;">
          <form>
            <table>
              <tr>
                <td class="left-align">手机号:</td>
                <td>
                  <div class="table-interval">
                    <el-input v-model="userTelephone" placeholder="请输入手机号" clearable></el-input>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="left-align" colspan="2">
                  <div>
                    <el-button v-on:click="sendMsg"  :disabled="isWait">{{waitCount}}{{userEmailTip}}</el-button>
                    <input class="codeInput" type="text" v-model="code" placeholder="请输入验证码" @keyup.enter="login">
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div style="display: flex;justify-content: space-evenly">
                    <el-radio-group v-model="userIsTeacher">
                      <el-radio label="0">学生</el-radio>
                      <el-radio label="1">老师</el-radio>
                    </el-radio-group>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div style="display: flex;justify-content: space-evenly">
                    <!--                  事件的绑定必须用v-on-->
                    <el-button :loading=isLoading @click="login" type="primary">登陆</el-button>
                    <el-button native-type="reset" type="primary" @click="reset">重置</el-button>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2"></td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="changeLoginType" @click="changeLoginType">
                    使用账号密码登陆
                  </div>
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
</template>

<script>

export default {
    name: "Login.vue",
    data() {
      return {
        userUsername: '',
        userPassword: '',
        userTelephone: '',
        loginType: 0,  //0表示普通登录,1表示短信登录
        reserveInformation: false,
        isLoading: false,
        userIsTeacher: '0',
        userEmailTip: '发送验证码',
        code: '',
        waitCount: ''
      }
    },
    computed:{
      isWait:function(){
        let data = this.$data;
        return data.timer != null?true:false;
      }
    },
    methods: {
      login:function(){
        let data = this.$data;
        if(data.userIsTeacher == "0"){
          this.studentLogin();
        }else{
          this.teacherLogin();
        }
      },
      studentLogin: function () {
        let data = this.$data;
        let app = this;
        data.isLoading = true;
        const qs = require('qs');
        //qs是一个npm安装的包用于将请求参数序列化
        //这里post报错,目前还不清楚原因
        this.axios.post('/user/login',qs.stringify(
          {
            'loginType': data.loginType,
            'userTelephone': data.userTelephone,
            'code': data.code,
            'userUsername': data.userUsername,
            'userPassword': data.userPassword
          }
        ))
        .then(function(response){
          let resData = response.data;
          if(resData.errCode == 200){
            app.$store.commit("changeLoginState");
            app.$store.commit("setUserNickname",resData.data.userNickname);
            app.$store.commit("setUserId",resData.data.userId);
            app.$store.commit("setTeacher",0);
            app.$router.push({
              path: '/main'
            });
          }else{
            app.$message(resData.errMsg);
          }
          data.isLoading = false;
        });
      },
      teacherLogin(){
        let data = this.$data;
        let app = this;
        data.isLoading = true;
        const qs = require('qs');
        //qs是一个npm安装的包用于将请求参数序列化
        //这里post报错,目前还不清楚原因
        this.axios.post('/user/login',qs.stringify(
          {
            'loginType': data.loginType,
            'userTelephone': data.userTelephone,
            'code': data.code,
            'userUsername': data.userUsername,
            'userPassword': data.userPassword
          }
        ))
          .then(function(response){
            let resData = response.data;
            if(resData.errCode == 200){
              app.$store.commit("changeLoginState");
              app.$store.commit("setUserNickname",resData.data.userNickname);
              app.$store.commit("setUserId",resData.data.userId);
              app.$store.commit("setTeacher",1);
              app.$router.push({
                path: '/main'
              });
            }else{
              app.$message(resData.errMsg);
            }
            data.isLoading = false;
          });
      },
      reset:function () {
        let data = this.$data;
        data.userUsername = "";
        data.userPassword = "";
      },
      changeLoginType(){
        let data = this.$data;
        data.loginType = 1-data.loginType;
      },
      waitMsg:function(){
        let data = this.$data;
        if(data.timer==null){
          let time =60;
          data.userEmailTip = "s后可再发送";
          data.waitCount = time;
          data.timer = setInterval(function () {
            if(time <= 60 && time > 0){
              time--;
              data.waitCount = time;
            }else{
              clearInterval(data.timer);
              data.timer = null;
              data.waitCount = '';
              data.userEmailTip = "发送验证码";
            }
          },1000);
        }
      },
      sendMsg: function (event) {
        const qs = require("qs");
        let data = this.$data;
        let userTelephoneTest = /^1[3|4|5|7|8][0-9]{9}/;
        let result = userTelephoneTest.test(data.userTelephone);
        if(!userTelephoneTest.test(data.userTelephone)){
          this.$message("请输入正确的手机号!");
          return ;
        }
        //设置定时器使暂时无法发送信息
        this.waitMsg();
        this.axios.post('/user/sendLoginMsg',qs.stringify({
          'userTelephone': data.userTelephone
        }))
          .then(response => {
            let resData = response.data;
            if(resData.errCode == 200){
              this.$message({
                message: resData.data,
                type: 'success'
              });
            }else{
              this.$message(resData.errMsg);
            }
          })
      }
    }
  }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 900px;
    background-image: url("../assets/images/background2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .container{
    width: 400px;
    height: 500px;
    background-color: rgba(100%,100%,100%,0.3);
  }

  .center-align{
    text-align: center;
  }

  .left-align{
    text-align: left;
  }

  .changeLoginType{
    cursor: pointer;
    font-size: 13px;
    color: #8c939d;
    opacity: 1;
  }

  .codeInput{
    background-color: rgba(255,255,255,0);
    border:0px;
    border-bottom: 1px solid white;
    margin-left: 5px;
    line-height: 45px;
    height: 45px;
    font-size: 14px;
    color: #606266;
  }

  /*display导致按钮大小过大*/
  .codeInput:focus{
    outline: none;
    border-bottom: 1px solid #bdc3c7;
    transition: 0.5s;
  }
</style>
